import React from 'react';
import { Table, Spin, Button, Space } from 'antd';
import useStudentStars from '../components/useStudentStars';
import { pad6 } from '../utils/pad6';

const columns = [
  { title: 'ID', dataIndex: 'id', width: 80 },
  {
    title: '姓名',
    dataIndex: 'name',
    render: (name) => (
      <span style={{ display: 'inline-block', width: '6em' }}>{pad6(name)}</span>
    ),
  },
  {
    title: '星星',
    dataIndex: 'stars',
    render: (s) => `${s} ⭐`,
  },
  {
    title: '操作',
    key: 'action',
    render: (_, { id, name, stars }) => (
      <Space>
        <Button size="small" onClick={() => alert(`明细：${name}`)}>明细</Button>
        <Button size="small" type="primary" onClick={() => alert(`使用：${name}`)}>使用</Button>
      </Space>
    ),
  },
];

export default function PcStars() {
  const { data, loading } = useStudentStars();
  return (
    <Spin spinning={loading}>
      <Table rowKey="id" columns={columns} dataSource={data} pagination={false} />
    </Spin>
  );
}